<template>
  <div class="about">
    <div class="header">
      <van-search  shape="round" class="search" placeholder="请输入搜索关键词" />
      <i class="iconfont icon-gengduo1" @click="$router.push('/selectCity')"></i>
    </div>
    <div class="main">
      <van-tabs v-model:active="activeName">
        <van-tab title="标签 1" name="a">
          <div class="top">
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"></van-image>
            <p>吉岛拥有众多海滩，西侧是大片的海域，东侧与攀牙湾形成小海湾，因此大部分美丽的海滩位于普…</p>
          </div>
          <div class="bottom">
            <ul>
              <li class="left" v-for="item in 5">
                <div>
                  <van-image src="	https://cdn7.axureshop.com/demo2024/1212098/images/%E6%94%BB%E7%95%A5/u3372.png"
                    class="icons"></van-image>
                </div>
                <div class="right">
                  <div class="right-top">
                    <p>济州岛｜去不会腻的神仙地方</p>
                  </div>
                  <div class="right-zj">
                    <p>第一次去济州岛真的好开心，提前做好了攻略，去的那天我的内心是压制不住的…</p>
                  </div>
                  <div class="right-bottom">
                    <van-image
                      src="https://cdn7.axureshop.com/demo2024/1212098/images/%E6%89%BE%E6%94%BB%E7%95%A5/u1299.png"></van-image>
                    <span>西瓜</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="标签 2" name="b">
          <header-set-com :title="String(999)"></header-set-com>
          <header-set-com>
            <template #title>
              <div>
                hhhhhhhhhhhhhhhhhhhhhhh
              </div>
            </template>
          </header-set-com>
          <header-set-com>
            <template #title>
              <div>
               管你叫姐姐姐姐
              </div>
            </template>
          </header-set-com>
        </van-tab>
        <van-tab title="标签 3" name="c">内容 3</van-tab>
        <van-tab title="标签 4" name="d">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import headerSetCom from '@/components/headerSetCom/headerSetCom.vue';
const activeName = ref('a');
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  height: 0.8rem;
}

.search {
  width: 3rem;
}

.main {
  padding: 0.2rem;
}

.top {
  height: 2rem;
  border-radius: 0.5rem;
  margin-bottom: 0.8rem;
  // padding: 0.3rem;
  // background-color: #fff;

  .van-image {
    width: 100%;
    height: 100%;
  }
}

.bottom {
  // display: flex;
  width: 100%;
  // background-color: yellow;

  .left {
    display: flex;
    // background-color: red;
    margin-bottom: 0.4rem;

    .icons {
      height: 100%;
      width: 100%;
    }

    // width: 30%;
    .right {
      margin-left: 0.3rem;
    }
  }

}
</style>
